<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-22 15:03
 * Desc: detailList 详情内容块
 */
-->
<template>
  <view class="detailList">
    <view class="fs30 fc3 b mb25" v-if="title">{{ title }}</view>
    <slot v-else name="title"></slot>
    <template v-if="list.length > 0">
      <view
        class="detailList__block"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="mr45 detailList__prop">{{ item.label || '--' }}</view>
        <view class="detailList__label" v-if="!isArray(info[item.prop])">
          {{ info[item.prop] || '--' }}
        </view>
        <view v-else class="detailList__label">
          <view v-for="(val, idx) in info[item.prop]" :key="idx">
            <u-line dashed v-if="hasLine(val)"></u-line>
            <view v-else>{{ val }}</view>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>
<script>
  export default {
    name: 'DetailList',
    props: {
      list: {
        type: Array,
        default: () => {
          return []
        }
      },
      info: {
        type: Object,
        default: () => {
          return {}
        }
      },
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },
    methods: {
      hasLine(item) {
        return item === '{{line}}'
      },
      isArray(val) {
        return val instanceof Array
      }
    }
  }
</script>
<style lang="scss" scoped>
  .detailList {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 24upx;
    color: #888888;
    &__block {
      display: flex;
      line-height: 46upx;
      word-break: break-all;
      flex-wrap: wrap;
    }
    &__prop {
      width: 120upx;
      text-align-last: justify;
    }
    &__label {
      flex: 1;
    }
  }
</style>
